<template>
  <div v-loading="logsLoading" class="logsDetail">
    <ContentWrap>
      <div class="table-list-box">
        <el-table
          border
          height="350"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="dataList"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
          <el-table-column prop="operator" label="操作人" width="100" align="center" />
          <el-table-column prop="operationTime" label="操作时间" width="150" align="center" />
          <el-table-column prop="operateType" label="操作类型" width="150" align="center" />
          <el-table-column prop="operateContent" label="操作内容" :show-overflow-tooltip="true" align="center" />
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="pageInfo.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size.sync="pageInfo.rows"
          layout="sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { parseTime } from '@/utils/index'
import { getOrderLog } from '@/api/mscInfo'
export default {
  components: {
    ContentWrap
  },
  props: {
    orderLog: {
      type: Array,
      default: () => ([])
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      logsLoading: false,
      dataList: [],
      pageInfo: {
        page: 1,
        rows: 10,
        total: 0
      }
    }
  },
  created() {
    this.orderLog.forEach(list => {
      list.operationTime = parseTime(list.operationTime)
    })
    this.getLogDetail()
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    /**
     * 获取详情
     */
    getLogDetail() {
      const { page, rows } = this.pageInfo
      this.logsLoading = true
      getOrderLog(this.orderId, { page, rows }).then(res => {
        if (res.success === 1) {
          this.pageInfo.total = res.data.total
          res.data.records.forEach(list => {
            list.operationTime = parseTime(list.operationTime)
          })
          this.dataList = res.data.records
          this.$nextTick(() => {
            this.logsLoading = false
          })
        }
      })
    },
    /**
     * 选择每页多少条
     */
    handleSizeChange(pageSize) {
      this.$set(this.pageInfo, 'page', 1)
      this.$set(this.pageInfo, 'rows', pageSize)
      this.$nextTick(() => {
        this.getLogDetail()
      })
    },
    /**
     * 分页
     */
    handleCurrentChange(currrentPage) {
      this.$set(this.pageInfo, 'page', currrentPage)
      this.$nextTick(() => {
        this.getLogDetail()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
